<template>
  <div class="address-container">
    <div class="address-title">
      <div class="address-user">
        <img src="../assets/images/address.png" alt>
        <div class="txt">收货人信息</div>
      </div>
      <div class="add-address" @click="addAddress">+ 新增收货地址</div>
    </div>
    <div class="address-list" :class="{ close: isClose }">
      <div class="address-item" :class="'address-active'">
        <div class="address-info">
          <div class="address-detail">
            <div class="user">
              <div class="circle">
                <span />
              </div>
              <span v-text="address.receiverName">张三</span>
            </div>
            <div class="phone" v-text="address.receiverPhone">13800138000</div>
            <div class="address-name" v-text="formatAddress(address)">广东 广州 天河区棠下街道市场北</div>
          </div>
          <!--<div class="address-edit">
            <span class="edit-address">修改</span>
            <span class="del-address">删除</span>
          </div>-->
        </div>
      </div>
      <div v-for="(item,index) in list" :key="index" class="address-item" @click="selectAddress(item)">
        <div class="address-info">
          <div class="address-detail">
            <div class="user">
              <div class="circle" >
                <span />
              </div>
              <span v-text="item.receiverName">张三</span>
            </div>
            <div class="phone" v-text="item.receiverPhone">13800138000</div>
            <div class="address-name" v-text="formatAddress(item)">广东 广州 天河区棠下街道市场北</div>
          </div>
          <div class="address-edit">
            <span class="edit-address" @click.stop="editAddress(item)">修改</span>
            <span class="del-address" @click.stop="deleteAddress(item)">删除</span>
          </div>
        </div>
      </div>
    </div>
    <div class="close-address" @click="closeAddress">
      <span v-if="isRotate">展开收货地址</span>
      <span v-else>收起收货地址</span>
      <i class="el-icon-d-arrow-right" :class="{ rotate: isRotate }" />
    </div>
    <!--新增地址弹窗 -->
    <NewReceivingAddress v-if="showPopUp" ref="addressDialog" :type="type" @closePopUp="closePopUp" @getList="getList"/>
  </div>
</template>

<script>
import NewReceivingAddress from '@/components/NewReceivingAddress'
import { listAllAddress, getAddressInfo, deleteAddress } from '@/api/address'
export default {
  components: {
    NewReceivingAddress
  },
  props: {
    address: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isRotate: true,
      isClose: true,
      showPopUp: false,
      list: [],
      init: false,
      type: 0, // 0为新增，1为修改,
      chooseAddress: {},
      index: 0
    }
  },
  watch: {
    isRotate(val) {
      if (!val) {
        if (!this.init) {
          this.getList()
        }
      }
    }
  },
  methods: {
    // 获取收货地址列表
    getList() {
      listAllAddress('address').then(response => {
        if (response.data) {
          this.list = response.data
          this.init = true
        }
      })
    },
    // 修改地址
    editAddress(item) {
      this.type = 1
      document.body.style.overflow = 'hidden'
      const type = 'address-edit'
      getAddressInfo(item.id, type).then(response => {
        this.$refs.addressDialog.ruleForm = response.data
        this.$refs.addressDialog.ruleForm.addressTitle = response.data.receiveProvince + response.data.receiveCity + response.data.receiveDistrict + response.data.receiveAddress
      })
      this.showPopUp = true
    },
    // 删除地址
    deleteAddress(item) {
      this.$confirm('您确定要删除改地址么', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          const type = ''
          deleteAddress(item.id, type).then(response => {
            if (response.data) {
              this.$message.success('删除成功!')
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 选择地址
    selectAddress(item) {
      this.$emit('setAddress', item)
      this.closeAddress()
    },
    closeAddress() {
      this.isRotate = !this.isRotate
      this.isClose = !this.isClose
    },
    addAddress() {
      this.type = 0
      this.showPopUp = true
    },
    closePopUp() {
      this.showPopUp = false
      document.body.style.overflow = 'auto'
    },
    // 格式化地址
    formatAddress(item) {
      return `${item.receiveProvince} ${item.receiveCity} ${item.receiveDistrict} ${item.receiveAddress}`
    }
  }
}
</script>

<style scoped lang="scss">
.address-container {
  margin-bottom: 30px;
  .address-title {
    padding: 0 18px;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ff3b30;
    color: #fff;
    .address-user {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .add-address {
      width: 120px;
      height: 26px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #6b6b6b;
    }
    .add-address:hover {
      cursor: pointer;
    }
  }
  .address-list {
    .address-item {
      padding: 0 21px;
      background-color: #fff;

      .address-info {
          border-bottom: 1px dashed #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 44px;
        .address-detail {
          display: flex;
          align-items: center;
          justify-content: center;
          .user {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 28px;
            .circle {
              width: 10px;
              height: 10px;
              border-radius: 5px;
              border: 2px solid #ff3b30;
              margin-right: 10px;
            }
          }
          .address-name {
            margin: 0 16px;
          }
          .default-address {
            width: 70px;
            height: 22px;
            border-radius: 11px;
            background-color: #ff3b30;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
          }
        }
        .address-edit {
          display: flex;
          font-size: 12px;
          .default-edit {
            color: #6b6b6b;
          }
          span {
            color: #02a9f1;
          }

          span:hover {
            cursor: pointer;
          }
          .edit-address {
            margin: 0 10px;
          }
        }
      }

    }
    .address-item:nth-child(1){
        .address-info{
  border-top: none;
        }
    }
    .address-active {
      background-color: rgba(255, 244, 243, 0.5);
      border: 1px solid #ff3b30;
      .address-info {
    border: none;
      }
    }
  }
  div.close {
    height: 46px;
    background-color: #fff;
    overflow: hidden;
  }
  .close-address {
    padding: 0 21px;
    height: 44px;
    color: #6b6b6b;
    font-size: 12px;
    background-color: #fff;
    line-height: 44px;

    .el-icon-d-arrow-right {
      transform: rotate(-90deg);
      color: #c8c8c8;
    }
    i.rotate {
      transform: rotate(90deg);
    }
  }
  .close-address {
    cursor: pointer;
  }
}
</style>
